<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<!-- Begin Head -->

<head th:replace="/admin/common/CSSandJS :: head('商品管理')"></head>


<body>
<div class="loader">
    <div class="spinner">
        <img src="/admin/picture/loader.gif" alt="">
    </div>
</div>
<!-- Main Body -->
<div class="page-wrapper">
    <!-- Header Start -->
    <div th:replace="/admin/common/header :: header"></div>
    <!-- Sidebar Start -->
    <div th:replace="/admin/common/aside :: aside"></div>
    <!-- Container Start -->
    <div class="page-wrapper">
        <div class="main-content">
            <!-- Page Title Start -->
            <div class="row">
                <div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="page-title-wrapper">
                        <div class="page-title-box">
                            <h4 class="page-title">All Product</h4>
                        </div>
                        <div class="breadcrumb-list">
                            <ul>
                                <li class="breadcrumb-link">
                                    <a href="javascript:void(0);"><i class="fas fa-home mr-2"></i>Dashboard</a>
                                </li>
                                <li class="breadcrumb-link active">All Product</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="exampleModal22" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel01">Add One Product</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label class="col-form-label">Title:</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="col-form-label">Price:</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="col-form-label">Kind:</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="col-form-label">Note:</label>
                                    <textarea class="form-control"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Add</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Table Start -->
            <div class="row ad-btm-space">
                <div class="col-xl-3 col-lg-4 col-md-4 col-sm-12">
                    <div class="int-blog-sidebar">
                        <div class="int-sidebar-box">
                            <h4>search</h4>
                            <div class="add-group" style="margin-left: 135px">
                                <a class="ad-btn" data-toggle="modal" data-target="#exampleModal22">Add Product</a>
                            </div>
                            <div class="int-search-btn">
                                <div class="input-group">
                                    <form th:action="@{/tProduct/admin/searchProduct}">
                                        <input type="text" style="display: none" th:name="offset" th:value="1">
                                        <input type="text" style="display: none" th:name="limit" value="6">
                                        <input type="text" placeholder="Search..." th:name="search">

                                        <div class="input-group-append">
                                            <button type="submit">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30.239 30.239" width="18" height="18"><g><g>
                                                    <path d="M20.194,3.46c-4.613-4.613-12.121-4.613-16.734,0c-4.612,4.614-4.612,12.121,0,16.735   c4.108,4.107,10.506,4.547,15.116,1.34c0.097,0.459,0.319,0.897,0.676,1.254l6.718,6.718c0.979,0.977,2.561,0.977,3.535,0   c0.978-0.978,0.978-2.56,0-3.535l-6.718-6.72c-0.355-0.354-0.794-0.577-1.253-0.674C24.743,13.967,24.303,7.57,20.194,3.46z    M18.073,18.074c-3.444,3.444-9.049,3.444-12.492,0c-3.442-3.444-3.442-9.048,0-12.492c3.443-3.443,9.048-3.443,12.492,0   C21.517,9.026,21.517,14.63,18.073,18.074z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#ffffff"></path></g></g>
                                                </svg>
                                            </button>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>

                        <div class="int-sidebar-box recent-blog-one">
                            <h4>category</h4>
                            <div class="int-blog-category-mini">
                                <ul>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Tables </a><span>201</span></li>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Sofas & Chairs </a><span>389</span></li>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Wood Sofa </a><span>564</span></li>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Decoration </a><span>59</span></li>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Celling Light </a><span>965</span></li>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Outdoor Furniture </a><span>653</span></li>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Hallway </a><span>201</span></li>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Hallway </a><span>201</span></li>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Office Furniture </a><span>560</span></li>
                                    <li><a href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="8px">
                                        <path fill-rule="evenodd" fill=" " d="M0.038,4.720 L6.164,4.710 C6.558,4.710 6.878,4.392 6.878,3.999 L6.878,2.016 L9.967,3.999 L5.777,6.688 C5.445,6.901 5.349,7.342 5.563,7.673 C5.777,8.004 6.219,8.099 6.551,7.886 L11.673,4.597 C11.877,4.466 12.000,4.241 12.000,3.999 C12.000,3.756 11.877,3.531 11.673,3.400 L6.551,0.112 C6.331,-0.030 6.051,-0.040 5.822,0.085 C5.592,0.210 5.449,0.449 5.449,0.710 L5.449,3.286 L0.000,3.286 "></path>
                                    </svg> Home Electronics </a><span>56</span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="int-sidebar-box">
                            <h4>Filter Price</h4>
                            <div class="int-blog-category-mini">
                                <div class="range-slider">
                                    <div class="price-range"><p><span id="amount"></span></p></div>
                                    <div id="slider-range" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
                                        <div class="ui-slider-range ui-corner-all ui-widget-header">
                                        </div>
                                        <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default">
										</span><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="int-sidebar-box">
                            <h4>Discount</h4>
                            <div class="int-blog-category-mini">
                                <ul>
                                    <li>
                                        <div class="int-checkbox">
                                            <input type="checkbox" id="auth_remember" name="remember" value="1">
                                            <label for="auth_remember">Less than 20%</label>
                                        </div>
                                        <span>12</span></li>
                                    <li>
                                        <div class="int-checkbox">
                                            <input type="checkbox" id="auth_remember2" name="remember" value="1">
                                            <label for="auth_remember2">10% or More</label>
                                        </div>
                                        <span>18</span></li>
                                    <li>
                                        <div class="int-checkbox">
                                            <input type="checkbox" id="auth_remember21" name="remember" value="1">
                                            <label for="auth_remember21">20% or More</label>
                                        </div>
                                        <span>16</span></li>
                                    <li>
                                        <div class="int-checkbox">
                                            <input type="checkbox" id="auth_remember3" name="remember" value="1">
                                            <label for="auth_remember3">30% or More</label>
                                        </div>
                                        <span>156</span></li>
                                    <li>
                                        <div class="int-checkbox">
                                            <input type="checkbox" id="auth_remember4" name="remember" value="1">
                                            <label for="auth_remember4">50% or More</label>
                                        </div>
                                        <span>260</span></li>
                                    <li>
                                        <div class="int-checkbox">
                                            <input type="checkbox" id="auth_remember5" name="remember" value="1">
                                            <label for="auth_remember5">70% or More</label>
                                        </div>
                                        <span>96</span></li>
                                    <li>
                                        <div class="int-checkbox">
                                            <input type="checkbox" id="auth_remember6" name="remember" value="1">
                                            <label for="auth_remember6">80% or More</label>
                                        </div>
                                        <span>14</span></li>
                                    <li>
                                        <div class="int-checkbox">
                                            <input type="checkbox" id="auth_remember7" name="remember" value="1">
                                            <label for="auth_remember7">75% or More</label>
                                        </div>
                                        <span>44</span></li>
                                    <li>
                                        <div class="int-checkbox">
                                            <input type="checkbox" id="auth_remember8" name="remember" value="1">
                                            <label for="auth_remember8">95% or More</label>
                                        </div>
                                        <span>55</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9 col-lg-8 col-md-8 col-sm-12">
                    <div class="main-product-grid">
                        <ul>
                            <li th:each="product:${pageInfo.list}">
                                <div class="product-grid">
                                    <div class="product-item">
                                        <img th:src="@{${product.photo}}" alt="product-img">
                                        <div class="product-overlay"><h4>sale</h4></div>
                                        <div class="product-ovr-links">
                                            <ul>
                                                <li>
                                                    <a href="product-single.html">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="17px" height="16px">
                                                            <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M16.949,4.171 L14.077,11.019 C13.972,11.258 13.752,11.410 13.501,11.410 L5.608,11.410 C5.325,11.410 5.073,11.215 5.000,10.932 L2.432,1.301 L0.629,1.301 C0.283,1.301 -0.000,1.008 -0.000,0.650 C-0.000,0.291 0.283,-0.002 0.629,-0.002 L2.903,-0.002 C3.186,-0.002 3.438,0.193 3.511,0.476 L6.079,10.107 L13.081,10.107 L15.408,4.562 L7.652,4.562 C7.306,4.562 7.023,4.269 7.023,3.910 C7.023,3.552 7.306,3.259 7.652,3.259 L16.373,3.259 C16.582,3.259 16.781,3.366 16.897,3.552 C17.012,3.737 17.033,3.964 16.949,4.171 ZM5.010,13.040 C5.796,13.040 6.436,13.704 6.436,14.519 C6.436,15.334 5.796,15.998 5.010,15.998 C4.224,15.998 3.585,15.334 3.585,14.519 C3.585,13.704 4.224,13.040 5.010,13.040 ZM13.825,13.040 C14.612,12.987 15.293,13.606 15.345,14.410 C15.366,14.813 15.251,15.192 15.000,15.486 C14.748,15.791 14.402,15.965 14.025,15.998 C13.993,15.998 13.951,15.998 13.920,15.998 C13.176,15.998 12.557,15.389 12.505,14.617 C12.452,13.813 13.039,13.095 13.825,13.040 Z"></path>
                                                        </svg>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="15px" height="16px">
                                                            <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M14.766,14.570 L11.069,10.609 C12.020,9.445 12.540,7.981 12.540,6.456 C12.540,2.894 9.727,-0.002 6.269,-0.002 C2.812,-0.002 -0.002,2.894 -0.002,6.456 C-0.002,10.018 2.812,12.916 6.269,12.916 C7.567,12.916 8.804,12.512 9.862,11.747 L13.587,15.738 C13.742,15.905 13.952,15.997 14.176,15.997 C14.389,15.997 14.590,15.914 14.743,15.761 C15.068,15.439 15.078,14.904 14.766,14.570 ZM6.269,1.682 C8.825,1.682 10.904,3.823 10.904,6.456 C10.904,9.090 8.825,11.231 6.269,11.231 C3.714,11.231 1.634,9.090 1.634,6.456 C1.634,3.823 3.714,1.682 6.269,1.682 Z"></path>
                                                        </svg>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="19px" height="17px">
                                                            <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M17.224,2.226 C16.374,1.364 15.199,0.933 13.698,0.933 C13.283,0.933 12.860,1.009 12.428,1.156 C11.996,1.307 11.594,1.509 11.223,1.762 C10.851,2.016 10.531,2.254 10.263,2.476 C9.995,2.698 9.741,2.935 9.500,3.184 C9.259,2.935 9.004,2.698 8.737,2.476 C8.469,2.254 8.149,2.016 7.777,1.762 C7.406,1.509 7.004,1.307 6.572,1.156 C6.140,1.009 5.716,0.933 5.301,0.933 C3.801,0.933 2.626,1.364 1.776,2.226 C0.925,3.087 0.500,4.281 0.500,5.810 C0.500,6.275 0.579,6.754 0.736,7.247 C0.893,7.740 1.073,8.161 1.273,8.507 C1.474,8.855 1.702,9.193 1.956,9.524 C2.211,9.853 2.397,10.080 2.514,10.206 C2.631,10.330 2.723,10.421 2.790,10.477 L9.058,16.749 C9.178,16.873 9.326,16.935 9.500,16.935 C9.674,16.935 9.821,16.873 9.942,16.749 L16.200,10.497 C17.733,8.906 18.500,7.344 18.500,5.809 C18.500,4.281 18.075,3.087 17.224,2.226 ZM15.326,9.519 L9.500,15.342 L3.664,9.508 C2.412,8.209 1.786,6.976 1.786,5.809 C1.786,5.248 1.858,4.751 2.002,4.320 C2.146,3.890 2.330,3.548 2.554,3.292 C2.779,3.039 3.051,2.833 3.373,2.673 C3.694,2.514 4.009,2.406 4.317,2.350 C4.625,2.295 4.953,2.268 5.301,2.268 C5.650,2.268 6.025,2.355 6.426,2.533 C6.828,2.710 7.198,2.933 7.536,3.200 C7.874,3.467 8.164,3.717 8.405,3.950 C8.646,4.182 8.847,4.396 9.008,4.591 C9.128,4.744 9.292,4.819 9.500,4.819 C9.708,4.819 9.872,4.744 9.992,4.591 C10.153,4.396 10.354,4.182 10.595,3.950 C10.836,3.717 11.126,3.468 11.464,3.200 C11.802,2.933 12.172,2.710 12.574,2.533 C12.975,2.355 13.351,2.268 13.699,2.268 C14.047,2.268 14.375,2.295 14.683,2.350 C14.991,2.406 15.306,2.514 15.627,2.673 C15.949,2.833 16.222,3.039 16.446,3.292 C16.670,3.548 16.854,3.890 16.998,4.320 C17.142,4.751 17.214,5.248 17.214,5.809 C17.214,6.976 16.585,8.212 15.326,9.519 Z"></path>
                                                        </svg>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="product-text-rs">
                                        <a href="javascript:;">
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                        </a>
                                        <h3 th:text="${product.title}"></h3>
                                        <h6 th:text="${product.note}"></h6>
                                        <!--											th:text="${product.price}"-->
                                        <p><span th:text="${product.price}" th:if="not (${product.discount} eq 1)"></span>￥[[${#numbers.formatDecimal(product.price * product.discount,1,'COMMA',2,'POINT')}]]</p>
                                    </div>
                                </div>
                            </li>
                        </ul>

                    </div>
                    <div class="card-footer pt-0">
                        <nav class="d-inline-block">
                            <ul class="pagination mb-0 ">
                                <li class="page-item">
                                    <a class="page-link" th:if="(${pageInfo.pageNum} gt 0)" th:href="@{|/tProduct/admin/products?offset=${pageInfo.pageNum-1}&limit=6|}" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
                                </li>
                                <li class="page-item active "><a class="page-link " th:href="@{/tProduct/admin/products?offset=1&limit=6}">首页</a></li>
                                <li class="page-item disabled">
                                    <a class="page-link " href="#">[[${pageInfo.pageNum}]]</a>
                                </li>
                                <li class="page-item active"><a class="page-link " th:href="@{|/tProduct/admin/products?offset=${pageInfo.pages}&limit=6|}">尾页</a></li>
                                <li class="page-item ">
                                    <a class="page-link " th:if="(${pageInfo.pageNum} lt ${pageInfo.pages+1})" th:href="@{|/tProduct/admin/products?offset=${pageInfo.pageNum+1}&limit=6|}"><i class="fas fa-chevron-right "></i></a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
                <div class="ad-footer-btm">
                    <p>Copyright &copy; 2021.Software engineering team 4 production.<a target="_blank" ></a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Slide Setting Box -->
    <div class="slide-setting-box">
        <div class="slide-setting-holder">
            <div class="setting-box-head">
                <h4>General Settings</h4>
                <a href="javascript:void(0);" class="close-btn">Close</a>
            </div>
            <div class="setting-box-body">
                <div class="p-4">
                    <div class="switch-settings">
                        <div class="d-flex mb-3">
                            <span class="mr-auto fs-15">Notifications</span>
                            <div class="checkbox checkbox-toggle">
                                <input id="checkbox55" type="checkbox">
                                <label for="checkbox55"></label>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <span class="mr-auto fs-15">Show your emails</span>
                            <div class="checkbox checkbox-toggle">
                                <input id="checkbox56" type="checkbox">
                                <label for="checkbox56"></label>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <span class="mr-auto fs-15">Show Task statistics</span>
                            <div class="checkbox checkbox-toggle">
                                <input id="checkbox57" type="checkbox">
                                <label for="checkbox57"></label>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <span class="mr-auto fs-15">Show recent activity</span>
                            <div class="checkbox checkbox-toggle">
                                <input id="checkbox58" type="checkbox">
                                <label for="checkbox58"></label>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <span class="mr-auto fs-15">System Logs</span>
                            <div class="checkbox checkbox-toggle">
                                <input id="checkbox59" type="checkbox">
                                <label for="checkbox59"></label>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <span class="mr-auto fs-15">Error Reporting</span>
                            <div class="checkbox checkbox-toggle">
                                <input id="checkbox60" type="checkbox">
                                <label for="checkbox60"></label>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <span class="mr-auto fs-15">Show your status to all</span>
                            <div class="checkbox checkbox-toggle">
                                <input id="checkbox61" type="checkbox">
                                <label for="checkbox61"></label>
                            </div>
                        </div>
                        <div class="d-flex">
                            <span class="mr-auto fs-15">Keep up to date</span>
                            <div class="checkbox checkbox-toggle">
                                <input id="checkbox62" type="checkbox">
                                <label for="checkbox62"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-3 border-top border-bottom">
                <h5 class="border-bottom-0 mb-0">Overview</h5>
            </div>
            <div class="p-4">
                <div class="progress-wrapper">
                    <div class="mb-3">
                        <p class="mb-2">Achieves<span class="float-right text-muted font-weight-normal">95%</span></p>
                        <div class="progress h-1">
                            <div class="progress-bar bg-primary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
                <div class="progress-wrapper pt-2">
                    <div class="mb-3">
                        <p class="mb-2">Projects<span class="float-right text-muted font-weight-normal">65%</span></p>
                        <div class="progress">
                            <div class="progress-bar bg-secondary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
                <div class="progress-wrapper pt-2">
                    <div class="mb-3">
                        <p class="mb-2">Earnings<span class="float-right text-muted font-weight-normal">55%</span></p>
                        <div class="progress">
                            <div class="progress-bar bg-success col-8" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
                <div class="progress-wrapper pt-2">
                    <div class="mb-3">
                        <p class="mb-2">Balance<span class="float-right text-muted font-weight-normal">50%</span></p>
                        <div class="progress h-1">
                            <div class="progress-bar bg-warning w-50 " role="progressbar"></div>
                        </div>
                    </div>
                </div>
                <div class="progress-wrapper pt-2">
                    <div class="mb-3">
                        <p class="mb-2">Total Profits<span class="float-right text-muted font-weight-normal">80%</span></p>
                        <div class="progress">
                            <div class="progress-bar bg-info col-6" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
                <div class="progress-wrapper pt-2">
                    <div class="mb-3">
                        <p class="mb-2">Total Likes<span class="float-right text-muted font-weight-normal">75%</span></p>
                        <div class="progress h-1">
                            <div class="progress-bar bg-teal w-75" role="progressbar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Color Setting -->
    <div id="style-switcher">
        <div>
            <ul class="colors">
                <li>
                    <p class='colorchange' id='color'>
                    </p>
                </li>
                <li>
                    <p class='colorchange' id='color2'>
                    </p>
                </li>
                <li>
                    <p class='colorchange' id='color3'>
                    </p>
                </li>
                <li>
                    <p class='colorchange' id='color4'>
                    </p>
                </li>
                <li>
                    <p class='colorchange' id='color5'>
                    </p>
                </li>
                <li>
                    <p class='colorchange' id='style'>
                    </p>
                </li>
            </ul>
        </div>
        <div class="bottom">
            <a href="javascript:;" class="settings">
                <i class="fa fa-cog" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</div>
<!-- Color Setting -->
<!-- Script Start -->
<div th:replace="/admin/common/CSSandJS :: js"></div>
</body>

</html>